<template>
 <div>
  <el-form :model="form" :rules="rules" ref="authInfoRef" label-width="160px" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="身份证正面：" prop="idCardFront">
          <image-upload v-model="form.idCardFront"/>
          <div class="upload-tip">请上传清晰的身份证正面照片</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证反面：" prop="idCardBack">
          <image-upload v-model="form.idCardBack"/>
          <div class="upload-tip">请上传清晰的身份证反面照片</div>
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-form-item label="土地证明/承包合同：" prop="landProof">
      <image-upload :limit="3" v-model="form.landProof" class="material-upload-item"/>
      <div class="upload-tip fixed-bottom">请上传清晰的土地证明/承包合同（最多三张）</div>
    </el-form-item>
  
    <el-form-item label="农产品照片：" prop="productPhotos">
      <image-upload :limit="5" v-model="form.productPhotos" class="material-upload-item"/>
      <div class="upload-tip fixed-bottom">请上传清晰的农产品照片（最多五张）</div>
    </el-form-item>

    <el-form-item label="其他证明材料：" prop="otherProof">
      <image-upload :limit="20" v-model="form.otherProof" class="material-upload-item"/>
      <div class="upload-tip fixed-bottom">可上传其他证明材料（如合作社证明、荣誉证书等）</div>
    </el-form-item>
  </el-form>
 </div>
</template>
<script setup>
  defineProps({
  // 1.表单的所有数据
  form: {
    type: Object,
    default: () => ({})
  },
  // 2.表单的验证规则
  rules: {
    type: Object,
    default: () => ({})
  },
  // 3.主要农产品的字典数据
  main_products: {
    type: Array,
    default: () => []
  },
  // 4.农户类型的字典数据
  famer_type:{
    type: Array,
    default: () => []
  }
  });

  const authInfoRef = ref(null)
  
defineExpose({
  validate: () => {
    if (!authInfoRef.value) {
      return Promise.reject(new Error('表单实例不存在'));
    }
    return authInfoRef.value.validate();
  }
});
</script>
<style scoped>
  .upload-tip{
    font-size: 12px;
    color: gray;
  }
  .material-upload-item{
    margin-bottom: 40px;
  }
  .fixed-bottom{
    position: absolute; bottom: 10px;
  }
</style>